<template>
  <!-- 首页头部组件 -->
  <div class="index_header">
    <van-row type="flex" justify="space-between">
      <van-col span="6">
        <!-- 地区 -->
        <van-row type="flex" justify="space-around" @click="chooseArea">
          <van-col>
            <p class="area">
              {{ area }}
            </p></van-col
          >
          <van-col>
            <van-icon style="line-height: 14.4vw" color="#777" :name="arrow" />
          </van-col>
        </van-row>
        <!-- 地区选择面板 -->
        <van-action-sheet
          v-model="show"
          title="请选择"
          duration=".3"
          @close="onClose"
        >
          <div class="content">
            <van-area
              title="地区"
              :area-list="areaList"
              value="110101"
              @confirm="onConfirm"
            />
          </div>
        </van-action-sheet>
      </van-col>
      <van-col span="17">
        <!-- 搜索 -->
        <div class="search_wrapper">
          <div class="search_bar">
            <van-icon name="search" class="search_icon" />
            <p class="hot_key">{{ hot_key }}</p>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "IndexHeader",
  props: {
    hot_key: String, //热搜词
  },
  data() {
    return {
      arrow: "arrow-down", //地区选择面板 箭头图标
      area: "石家庄", //地区名称
      area_id: "", //地区编号
      show: false, //是否显示地区选择面板
      areaList: {
        //地区数据
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          110200: "县",
          120100: "天津市",
          120200: "县",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110105: "朝阳区",
          110106: "丰台区",
          120101: "和平区",
          120102: "河东区",
          120103: "河西区",
          120104: "南开区",
          120105: "河北区",
          // ....
        },
      },
    };
  },
  methods: {
    //打开地区选择面板
    chooseArea() {
      this.show = !this.show;
      this.arrow = "arrow-up";
    },
    //选择地区
    onConfirm(picker) {
      console.log(picker[picker.length - 1]);
      this.area = picker[picker.length - 1].name;
      this.area_id = picker[picker.length - 1].code;
      this.onClose();
    },
    //关闭地区选择面板
    onClose() {
      this.show = false;
      this.arrow = "arrow-down";
    },
  },
};
</script>

<style scoped>
.search_bar {
  display: flex;
  height: 10.133vw;
  width: 100%;
  margin-top: 1.867vw;
  line-height: 10.133vw;
  font-size: 3.733vw;
  background-color: #ffffff;
  border-radius: 13.333vw;
  box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
  padding: 0px 19.999px;
  box-sizing: border-box;
}
.hot_key {
  color: #000000;
}
.search_icon {
  line-height: 10.133vw;
  font-size: 4.8vw;
  margin-right: 2.667vw;
  color: #999999;
}
.content {
  padding: 0.16rem 0.16rem 1.6rem;
}
.index_header {
  height: 14.4vw;
  background-color: #ffffff;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 4vw;
}
.area {
  height: 14.4vw;
  line-height: 14.4vw;
  color: #777777;
  width: 100%;
}
/* /deep/ .van-picker-column {
  font-size: 3.733vw;
} */
/* /deep/ .van-picker-column__item{
  height: 11.733vw !important;
} */
</style>
